<template>
    <div class="content">
        <div class="left">
            <div class="chanpin-list pc">
                <div class="title ">产品中心</div>
                <div class="chanpin-item">
                    <div class="item" v-for="(item, index) in allLeftData" :key="index" @click="checData(index)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="newslist-content pc">
                <div class="title ">公司新闻</div>
                <div class="newslist-item">
                    <div class="item" v-for="(item, index) in newsListData.newslist" :key="index"
                        @click="goto('/newscontent', item.checkId, item.newsid)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>

        <div class="right pc">
            <div class="title">产品展示</div>
            <div class="chanpinlist-content">
                <div class="item-content">
                    <div class="item" v-for="(item, index) in viewChanpinData" :key="index"
                        @click="gotoProduccontent(item.id)">
                        <img :src="base64Img(item?.img)" alt="" srcset="">
                        <span>{{ item.title }}</span>
                        <span>{{ item.xinghao }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="phone">
            <div class="title">产品展示</div>
            <div class="chanpinlist-content">
                <div class="item-content">
                    <div class="item" v-for="(item, index) in allChanpinData" :key="index"
                        @click="gotoProduccontent(item.id)">
                        <img :src="base64Img(item?.img)" alt="" srcset="">
                        <span>{{ item.xinghao }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
import router from '../router/index.js'; // 导入路由实例
import { base64Img } from '../tools/tools.js'
import { getquanbuchanpin, getLeftList, getSheBeiLeiBie, getNewsList } from '../api/api/ProducView.js'
import { useRoute } from 'vue-router'

const route = useRoute()
// 显示的产品信息
const viewChanpinData = ref([])
// 手机显示
const phoneViewData = ref([])


// 全部产品信息
const allChanpinData = ref([])
// 左侧栏信息
const allLeftData = ref([])
// 公司新闻
const newsListData = ref([])
// 传入保存 
const checkData = reactive({
    checkId: route.query.checkId,
    id: route.query.id
})


// 跳转
const goto = (path, checkData, newsId) => {
    router.push({
        path: path,
        query: {
            checkData: checkData,
            newsId: newsId
        }
    })
}

// 获取全部产品信息
const _getquanbuchanpin = () => {
    getquanbuchanpin().then((res) => {
        console.log('全部产品信息', res);
        allChanpinData.value = res.data.data
    })
}
// 获取左侧列表
const _getLeftList = () => {
    getLeftList().then((res) => {
        console.log('左侧栏信息', res);
        allLeftData.value = res.data.data
    })
}
// 获取公司新闻
const _getNewsList = () => {
    getNewsList('sj1').then((res) => {
        console.log('新闻信息', res);
        newsListData.value = res.data
    })
}
// 根据传入数据进行请求
const _aboutCheckIdGetData = (data) => {
    // 如果是1 就请求小列表
    if (data.checkId == '1') {
        getSheBeiLeiBie(data.id).then((res) => {
            console.log('传入数据结果', res);
            viewChanpinData.value = res.data.data
        })
    } else {
        checkAll()
    }
}

//场地切换
const gotoProduccontent = (id) => {
    router.push({
        path: '/produccontent',
        query: {
            id: id
        }
    })

}


// 切换显示的内容
const checData = (checkId) => {
    viewChanpinData.value = allLeftData.value[checkId].chanpin
    console.log(allLeftData.value[checkId].chanpin);
}
// 查看全部
const checkAll = () => {
    viewChanpinData.value = allChanpinData.value
}

// 监听路由地址改变
onMounted(() => {
    _getLeftList()
    _getNewsList()
    _aboutCheckIdGetData(checkData)
    _getquanbuchanpin()
});

</script>
<style lang="scss" scoped>
// 取消显示手机端 显示pc端
@media (min-width: 800px) {
    .phone {
        display: none;
    }

    .content {
        width: 1200px;
        margin: 20px auto 0px auto;
        display: flex;
        justify-content: space-between;

        .left {
            margin: 20px 0;
            width: 200px;

            .chanpin-list {
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .chanpin-item {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                    line-height: 40px;
                    overflow: hidden;

                    .item {
                        cursor: pointer;
                    }

                    .item:hover {
                        color: orange;
                    }
                }
            }

            .newslist-content {
                border: 1px solid #dedede;
                margin-bottom: 20px;

                .title {
                    padding: 10px 0 10px 20px;
                    background-color: #f7f7f7;
                    border-bottom: 1px solid #dedede;
                }

                .newslist-item {
                    padding: 10px 0 10px 20px;
                    background-color: white;
                    cursor: pointer;

                    .item {
                        width: 180px;
                        white-space: nowrap;
                        /* 不换行 */
                        overflow: hidden;
                        /* 溢出隐藏 */
                        text-overflow: ellipsis;
                        line-height: 40px;
                        /* 用省略号表示溢出 */
                    }

                    .item:hover {
                        color: orange;
                    }
                }
            }
        }

        .right {
            margin-top: 20px;
            width: 980px;

            border: 1px solid #dedede;
            margin-bottom: 20px;

            .title {
                padding: 10px 0 10px 20px;
                background-color: #f7f7f7;
                border-bottom: 1px solid #dedede;
            }

            .chanpinlist-content {
                display: flex;
                justify-content: center;
                background-color: white;

                .item-content {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-gap: 20px;
                    padding: 20px 0;

                    .item {
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                        border: 1px solid #dedede;
                        padding: 10px;
                        width: 222px;

                        img {
                            width: 200px;
                        }

                        cursor: pointer;
                    }
                }

            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {
    .pc {
        display: none;
    }

    .phone {
        .title {
            line-height: 60px;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            border-bottom: 1px solid gainsboro;
            margin-bottom: 10px;
        }

        .chanpinlist-content {


            .item-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .item {
                    text-align: center;

                    img {
                        width: 100%;
                    }

                    width: calc(50% - 20px);
                }
            }
        }
    }
}
</style>